<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="apiAccount" prop="jt_apiAccount">
                        <el-input v-model="form.jt_apiAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="privateKey" prop="jt_privateKey">
                        <el-input v-model="form.jt_privateKey"></el-input>
                    </el-form-item>
                    <el-form-item label="客户编码" prop="jt_customerCode">
                        <el-input v-model="form.jt_customerCode"></el-input>
                    </el-form-item>
                    <el-form-item label="明文密码" prop="jt_orderPassword">
                        <el-input v-model="form.jt_orderPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="发件所在省" prop="sendProv">
                        <el-input v-model="form.sendProv"></el-input>
                    </el-form-item>
                    <el-form-item label="发件所在市" prop="sendCity">
                        <el-input v-model="form.sendCity"></el-input>
                    </el-form-item>
                    <el-form-item label="发件所在区" prop="sendArea">
                        <el-input v-model="form.sendArea"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="sendAddress">
                        <el-input v-model="form.sendAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="发件人姓名" prop="sendName">
                        <el-input v-model="form.sendName"></el-input>
                    </el-form-item>
                    <el-form-item label="发件人电话" prop="sendTell">
                        <el-input v-model="form.sendTell"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        tkIsShow:false,
        title:"",
        form:{},
        rules: {
            jt_apiAccount: [
                {required: true,message: "请输入apiAccount",trigger: ["blur,change"]}
            ],
            jt_customerCode: [
                {required: true,message: "请输入客户编码",trigger: ["blur,change"]}
            ],
            jt_orderPassword: [
                {required: true,message: "请输入密码",trigger: ["blur,change"]},
                // {pattern: /1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change']}
            ],
            jt_privateKey: [
                {required: true,message: "请输入privateKey",trigger: ["blur,change"]}
            ],
            sendAddress: [
                {required: true,message: "请输入详细地址",trigger: ["blur,change"]}
            ],
            sendArea: [
                {required: true,message: "请输入区",trigger: ["blur,change"]}
            ],
            sendCity: [
                {required: true,message: "请输入市",trigger: ["blur,change"]}
            ],
            sendName: [
                {required: true,message: "请输入发件人姓名",trigger: ["blur,change"]}
            ],
            sendProv: [
                {required: true,message: "请输入省",trigger: ["blur,change"]}
            ],
            sendTell: [
                {required: true,message: "请输入发件人电话",trigger: ["blur,change"]}
            ],
        }
    };
  },
  methods: {
    __init(str, obj = null) {
        if (str == "add") {
            this.form={
                supplierId:0,
                supplierName:'',
                supplierLxr:'',
                supplierPhone:'',
                supplierPwd:'',
                supplierType:1,
                supplierAddress:''
            }
        }else{
            var url="manager/getSupplierWuliuConfig";
            var params={
                supplierId: obj.supplierId
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    if(res.data==null){
                        this.form={
                            jt_apiAccount:'',
                            jt_customerCode:'',
                            jt_orderPassword:'',
                            jt_privateKey:'',
                            sendAddress:'',
                            sendArea:'',
                            sendCity:'',
                            sendName:'',
                            sendProv:'',
                            sendTell:'',
                            supplierId:obj.supplierId
                        }
                    }else{
                        this.form={
                            jt_apiAccount:res.data.jt_apiAccount,
                            jt_customerCode:res.data.jt_customerCode,
                            jt_orderPassword:res.data.jt_orderPassword,
                            jt_privateKey:res.data.jt_privateKey,
                            sendAddress:res.data.sendAddress,
                            sendArea:res.data.sendArea,
                            sendCity:res.data.sendCity,
                            sendName:res.data.sendName,
                            sendProv:res.data.sendProv,
                            sendTell:res.data.sendTell,
                            supplierId:res.data.supplierId,
                        }
                    }
                } else {
                    this.$message.error(res.msg)
                }
            });
        }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var url="manager/editSupplierWuliuConfig";
            var params={
                ...this.form
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.$message.success(res.msg)
                    this.closeTk();
                } else {
                    this.$message.error(res.msg)
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    closeTk(){
        this.tkIsShow = false;
        this.$emit("close");
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .tankuang{
    position: fixed;
    width: 30%;
    
    background-color: #fff;
    top: 10%;
    left: 35%;
    z-index: 101;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    margin: 15px 0;
  }
  .tk_content{
    width: 80%;
    margin-left: 10%;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
</style>